<template>
  <div id="days">
    <div class="dashboard_title">最高在线数统计</div>
    <div id="bar-chart" ref="days"></div>
  </div>
</template>

<script lang="ts" setup>
import { nextTick, onMounted, onUnmounted, ref } from 'vue';
import dayjs from 'dayjs';
import * as echarts from 'echarts';
import 'echarts/theme/macarons';
// echarts theme
import { getDeviceOnlineStatistics } from '@/api/onlineStatistics';

//全局定义chart，离开页面时直接清除chart；
let chart: any;
const activeName = ref('7');
const list = ref([]);
const xAxis = ref([]);
const days = ref();
onMounted(() => {
  getList();
});

const getList = () => {
  let obj = {};
  obj.startTime = dayjs().subtract(7, 'days').valueOf();
  obj.endTime = dayjs().valueOf();
  getDeviceOnlineStatistics(obj).then((response) => {
    if (response.code == 200) {
      initChart(response.data);
    }
  });
};

const initChart = (data: any) => {
  if (!days.value) return;
  chart = echarts.init(days.value);
  var LegData = ['在线数', '设备总数'];
  var maxSerData = [];
  var minSerData = [];
  var XaData = [];
  var XaAllData = [];
  data.forEach((item) => {
    maxSerData.push(item.maxOnline);
    minSerData.push(item.minOnline);
    XaData.push(item.time);
    XaAllData.push(item.total);
  });
  //数据参数

  var option = {
    // title: {
    //   textAlign: 'center',
    //   text: '最高在线数统计',
    //   x: '12%',
    //   y: '6%',
    //   textStyle: {
    //     fontSize: 16,
    //     fontWeight: 600,
    //     color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
    //         offset: 0,
    //         color: '#DADEDE' // 0% 处的颜色
    //       }], false),
    //     padding: 5,
    //   },
    // },

    // tooltip: {
    //     trigger: "axis",
    // },
    grid: [
      {
        top: '10%',
        bottom: '15%',
      },
    ],
    // tooltip: {
    //     trigger: 'axis',
    //     axisPointer: {
    //         type: 'shadow'
    //     },
    // },
    legend: {
      icon: 'circle',
      data: LegData,
      right: '15%',
      top: '0%',
      textStyle: {
        color: 'rgba(255, 255, 255, 0.6)',
      },
    },
    xAxis: [
      {
        type: 'category',
        data: XaData,
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          // rotate: 45,
          textStyle: {
            color: 'rgba(255, 255, 255, 0.6)',
            fontSize: 12,
          },
        },
        axisLine: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        splitLine: {
          //show: false,
          lineStyle: {
            type: 'dashed',
            color: 'rgba(255, 255, 255, 0.14)', //里面横着的虚线
          },
        },
        axisTick: {
          show: false,
        },
        // data: SerData,
        axisLabel: {
          textStyle: {
            color: 'rgba(255, 255, 255, 0.6)',
            fontSize: 12,
          },
        },
        axisLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: LegData[0],
        type: 'bar',
        data: maxSerData,
        barWidth: '20px',
        itemStyle: {
          normal: {
            barBorderRadius: [50, 50, 0, 0],
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              1,
              0,
              [
                {
                  offset: 0,
                  color: '#DADEDE', // 0% 处的颜色
                },
              ],
              false,
            ),
          },
        },
        label: {
          normal: {
            show: true,
            formatter: '{c}',
            position: 'insideTop',
            textStyle: {
              color: 'rgba(0,0,0,.6)',
              fontSize: 12,
            },
          },
        },
      },
      {
        name: LegData[1],
        type: 'bar',
        barGap: '-100%',
        barWidth: '20px',
        itemStyle: {
          color: 'rgba(0,0,0,0)',
          borderColor: '#2A71FD',
          padding: 0,
          normal: {
            barBorderRadius: [50, 50, 0, 0],
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              1,
              0,
              [
                {
                  offset: 0,
                  color: '#839694', // 0% 处的颜色
                },
              ],
              false,
            ),
          },
        },
        label: {
          normal: {
            show: true,
            lineHeight: 12,
            formatter: '{c}',
            position: 'top',
            right: 0,
            textStyle: {
              // fontWeight:'bold',
              color: 'rgba(255, 255, 255, 0.6)',
              fontSize: 12,
            },
          },
        },
        z: -10,
        data: XaAllData,
      },
    ],
    barCategoryGap: '40%',
  };
  chart.setOption(option);
  addEventListener('resize', function () {
    chart && chart.resize();
  });
};
</script>
<style lang="scss" scoped>
#days {
  position: relative;
  height: 100%;
}
#bar-chart {
  height: calc(100% - 6vh);
}
</style>
